<template>
  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
    <div>
      <el-button type="primary" size="mini">
        <svg-icon class-name="international-icon" icon-class="language" /> {{$t('navbar.lang')}}
      </el-button>
    </div>

    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="item in language_option" :key="item" :disabled="language===item" :command="item">{{item}}</el-dropdown-item>
      <!-- <el-dropdown-item :disabled="language==='en'" command="en">English</el-dropdown-item>
      <el-dropdown-item :disabled="language==='es'" command="es">Español</el-dropdown-item> -->
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import lang from "@/lang/index";
export default {
  created() {
    
  },

  data() {
    return {
      language_list: null,
      language_option: [],
    };
  },
  mounted(){
      setTimeout(() => {
        console.log('执行了setLanguage');
        this.setLanguage();
      }, 1500);
  },
  computed: {
    language() {
      return this.$store.getters.language;
    },
  },
  methods: {
    setLanguage() {
      this.language_list = lang.messages;
      console.log(this.language_list, "LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL");
      for (let lang in this.language_list) {
        this.language_option.push(lang);
      }
      this.$emit('handleBtnClick')
    },
    handleSetLanguage(lang) {
      this.$i18n.locale = lang;
      this.$store.dispatch("setLanguage", lang);
      // this.$message({
      //   message: "Switch Language Success",
      //   type: "success",
      // });
    },
  },
};
</script>
